<form action="#" class="am-form">
    <fieldset>
        <legend>微信支付</legend>
        <div style="margin-bottom: 8px;">
            <label class="am-radio-inline">
                <input type="radio" name="wx_status" value="0" data-am-ucheck checked> 开启
            </label>
            <label class="am-radio-inline">
                <input type="radio" name="wx_status" value="1" data-am-ucheck> 关闭
            </label>
        </div>
        <div class="input">
            <div class="am-input-group">
                <span class="am-input-group-label">微信账号</span>
                <input type="text" id="wx_account" placeholder="输入微信收款账号" required/>
            </div>
        </div>
        <div class="button wx">
            <button type="button" class="am-btn am-btn-primary btn-name">保存</button>
        </div>
        <div class="clear"></div>
        
        <div class="am-form-group" style="padding: 5px 0;">
            <label for="wx_qrcode">收款二维码：</label>
            <img src="" class="wx_qrcode"/>
            <input type="file" class="wx_qrcode" data-url="/tephra/ctrl-http/upload" multiple>
        </div>

        <legend>支付宝支付</legend>
        <div style="margin-bottom: 8px;">
            <label class="am-radio-inline">
                <input type="radio" name="alipay_status" value="0" data-am-ucheck checked> 开启
            </label>
            <label class="am-radio-inline">
                <input type="radio" name="alipay_status" value="1" data-am-ucheck> 关闭
            </label>
        </div>
        
        <div class="input" style="margin-bottom: 10px;">
            <div class="am-input-group">
                <span class="am-input-group-label">收款人姓名</span>
                <input type="text" id="alipay_name" placeholder="输入支付宝收款人名字" required/>
            </div>
        </div>
        <div class="clear"></div>

        <div class="input">
            <div class="am-input-group">
                <span class="am-input-group-label">支付宝账号</span>
                <input type="text" id="alipay_account" placeholder="输入支付宝收款账号" required/>
            </div>
        </div>
        <div class="button alipay">
            <button type="button" class="am-btn am-btn-primary btn-name">保存</button>
        </div>
        <div class="clear"></div>

        <!-- 财付通 -->
        <legend>财付通支付</legend>
        <div style="margin-bottom: 8px;">
            <label class="am-radio-inline">
                <input type="radio" name="cft_status" value="0" data-am-ucheck checked> 开启
            </label>
            <label class="am-radio-inline">
                <input type="radio" name="cft_status" value="1" data-am-ucheck> 关闭
            </label>
        </div>
        <div class="input" style="margin-bottom: 10px;">
            <div class="am-input-group">
                <span class="am-input-group-label">收款人姓名</span>
                <input type="text" id="cft_name" placeholder="输入财付通收款人名字" required/>
            </div>
        </div>
        <div class="clear"></div>
        <div class="input">
            <div class="am-input-group">
                <span class="am-input-group-label">财付通账号</span>
                <input type="text" id="cft_account" placeholder="输入财付通收款账号" required/>
            </div>
        </div>
        <div class="button cft">
            <button type="button" class="am-btn am-btn-primary btn-name">保存</button>
        </div>
        <div class="clear"></div>
        <!--
        <div class="am-form-group" style="padding: 5px 0;">
            <label for="alipay_qrcode">收款二维码：</label>
            <img src="" class="alipay_qrcode"/>
            <input type="file" class="alipay_qrcode" data-url="/tephra/ctrl-http/upload" multiple>
        </div> -->

        <legend>银行转账</legend>
        <div style="margin-bottom: 8px;">
            <label class="am-radio-inline">
                <input type="radio" name="bank_status" value="0" data-am-ucheck checked> 开启
            </label>
            <label class="am-radio-inline">
                <input type="radio" name="bank_status" value="1" data-am-ucheck> 关闭
            </label>
        </div>
        <table class="am-table am-table-bordered am-table-striped am-table-compact" id="banks">
            <thead>
            <tr>
                <th>序号</th>
                <th>银行名称</th>
                <th>账(卡)号</th>
                <th>账户名</th>
                <th>银行地址</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div class="bank">
            <button type="button" class="am-btn am-btn-primary btn-name">保存</button>
        </div>

        <script>
            var table = $("#banks tbody");
            table.empty();
            for (var i = 1; i <= 5; i++) {
                // 最多放5张银行卡
                var tr = $("<tr></tr>");
                tr.append("<td>" + i + "</td>");
                tr.append('<td><input type="text" name="bankName" placeholder="输入银行名称" class="am-form-field" required/></td>');
                tr.append('<td><input type="number" name="bankNumber" placeholder="输入卡号" class="am-form-field" required/></td>');
                tr.append('<td><input type="text" name="realname" placeholder="输入账号名" class="am-form-field" required/></td>');
                tr.append('<td><input type="text" name="addr" placeholder="输入银行地址" class="am-form-field" required/></td>');

                table.append(tr);
            }
        </script>

    </fieldset>
</form>

<style type="text/css">
    .am-form .input {
        width: 300px;
        float: left;
    }
    .am-form .button {
        float: left;
        margin-left: 20px;
    }
    img.wx_qrcode, img.alipay_qrcode {
        width: 100px;
        height: 100px;
    }
</style>

<script>
</script>
